<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>

        * {
            margin: 0;
            padding: 0;
        }
        .demo0 {
            size: 100px;
            color:#397ff9;
            text-align: left;
            line-height: 20px;
            text-decoration: none;
        }

        /*交集选择器 */
        div.red {
            color: red;
        }   

        /* 并集选择器 */
        .demo1,.demo2,.demo3,.demo4,#demo5{
            color: purple;
        }
        /* 后代选择器 */
        div p{
            color:pink;
        }
        /* 子代选择器  */
        ul li > a {
            color: pink;
        }


        /* ul li a {
            color: pink;
        } */

        /* 伪类选择器 */
        a:link { /* 未访问过的连接状态*/
            color: #3c333c;
            font-size: 25px;
            text-decoration: none;
            font-weight: 700;
        }   
        a:visited {/* 已访问过连接*/
            color: orange;
        }

        a:hover { /* 鼠标经过的样子*/
           color: purple; 
        }

        a:active { /* 鼠标点击的样子*/
            color: red;
        }
        

        /* .block {
            display: inline;
        } */
        .inline {
            display: block;
        }
        
        .imgBlock {
            display: block;
        }
        
        .pra1 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 10px;
        }

        .pra2 {
            display: block;
            width: 100px;
            height: 100px;
            background-color: green;
            margin-bottom: 10px;
        }
        .pra3 {
            display: inline-block;
            width: 80px;
            height: 20px;
            background-color: blue;
        }

        .pra3:hover {
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="demo0">
        <span>经常开发前端的朋友肯定知道Google Chrome是有开发模式的，这个功能非常强大，可以帮助我们调试代码找出错误位置。但是开发VUE的过程中，Chrome 的调试窗口中调试 Vue 代码有诸多不便， 好在 Visual Studio Code 中提供了 Debugger for Chrome 插件，能够通过配置直接在 VS Code 断点调试代码, 并且在 VS Code 的调试窗口看到 Chrome 中 console 相同的值，这篇文章就来介绍一下这个配置过程。</span >
    </div>

    <div>交集选择器</div>
    <div>交集选择器</div>
    <div class="red">交集选择器</div>


    <div class="demo1">并集选择器1</div>
    <div class="demo2">并集选择器2</div>
    <div class="demo3">并集选择器3</div>
    <div class="demo4">并集选择器4</div>
    <div id="demo5">并集选择器5</div>


    <div>王者荣耀</div>
    <div>王者荣耀</div>
    <div>王者荣耀</div>
    <div> 
        <p>
            王思聪
        </p>
    </div>

    <ul>
        <li>
            <a href="#">一级菜单</a>
     
            <div>
                <a href="#">二级菜单</a>
                <a href="#">三级菜单</a>
            </div>
        </li>
    </ul>


    <a href="http://baidu.com">百度一下</a>


    <div>
        块级元素
        <p>pppppp <a href="">aaa</a></p>
        <span>sssss <p>pppp</p> </span>
    </div>

    <span>span</span>

     <img src="../综合DEMO/images/ico1.png" alt="" width="100px">



     <div class="block" display="inline">块级元素 block</div>
     <span class="inline" >行内元素 inline</span>
     <img src="../综合DEMO/images/ico1.png" alt="" class="imgBlock">

    <div class="pra1"></div>
    <div class="pra1"></div>
    <div class="pra1"></div>

    <span class="pra2"></span>
    <span class="pra2"></span>
    <span class="pra2"></span>

    <a href="" class="pra3"></a>
    <a href="" class="pra3"></a>
    <a href="" class="pra3"></a>
</body>
</html>